<!DOCTYPE html>
<html>
    <head> <!-- 文件头 -->
        <meta charset = "UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <style>
            .block {
                background: grey;
                height: 60px;
                width: 60px;
                text-align: center;
                font-size: 13px;
                margin-left: 5px;
                border-radius: 10px;
                font-family: '微软雅黑', 'Courier New', Courier, monospace;
                font-weight: bolder;
                padding: 5px;
                float: left;
                user-select: none;
            }
            .line {
                position: absolute;
            }
            .blocks {
                background: red;
                color: whitesmoke;
                height: 60px;
                width: 60px;
                text-align: start;
                font-size: 20px;
                margin-left: 5px;
                border-radius: 10px;
                font-family: '微软雅黑', 'Courier New', Courier, monospace;
                padding: 5px;
                float: left;
                user-select: none;
            }
            .lines {
                position: absolute;
            }
        </style>
        <title>程序员之路 2048</title>
        <script>
            try {
                var A = new Array(4); /// 数据数组
                { /// 数组初始化
                    for(var i = 0; i < 4; i += 1) {
                        A[i] = new Array(4);
                        for(var j = 0; j < 4; j += 1) {
                            A[i][j] = 0; /// 初始信息
                        }
                    }
                }
                //var C = new Array(13); /// 颜色数组
                var C = ['grey', 'lightblue', 'greenyellow', 'darkorange', 'purple', 'brown', 'blue', 'green','red', 'pink', 'cyan','gold'];
                var N = ['', '分支结构', '循环结构', '递归', '指针', 'C语言', 'C++', '数据结构', '程序员', '架构师', '算法师', '算法学家', '哲学家']
                function remake(UpDown=false) { /// 重新显示信息
                    /*if(UpDown) {
                        $(".block").slideUp(150);
                    }else {
                        $(".block").fadeOut(150);
                    }*/
                    var cnt = 0;
                    var divs = document.getElementsByClassName("block"); /// 得到所有块
                    setTimeout(function() { /// 延时运行 200 ms
                        for(var i = 0; i < divs.length; i += 1) {
                            var x = parseInt(i/4), y = i%4;
                            if(A[x][y] > 0) { /// 显示数字
                                divs[i].getElementsByTagName("p")[0].innerHTML = N[A[x][y]];
                                cnt += Math.pow(2, A[x][y]-1);
                            }else{
                                divs[i].getElementsByTagName("p")[0].innerHTML = "";
                            }
                            $(divs[i]).css('background', C[A[x][y]]);
                        }
                        /*if(UpDown) {
                            $(".block").slideDown(150);
                        }else {
                            $(".block").fadeIn(150);
                        }*/
                        document.getElementById("qwq").innerHTML = "总得分：" + cnt;
                    }, 0);
                }
                function rand_make() {
                    var Tmp = new Array(16), cnt = 0;
                    for(var i = 0; i < 4; i += 1) {
                        for(var j = 0; j < 4; j += 1) {
                            if(A[i][j] == 0) {
                                Tmp[cnt] = [i, j]; /// 记录所有零的位置
                                cnt += 1;
                            }
                        }
                    }
                    if(cnt == 0) {
                        alert("游戏结束，你输了!");
                        return false; /// 游戏结束
                    }else {
                        var plc = parseInt(Math.random() * cnt); /// 放置位置
                        var x = Tmp[plc][0], y = Tmp[plc][1];
                        A[x][y] = parseInt(Math.random()*5) + 1;
                        if(A[x][y] >= 3) {
                            A[x][y] = 1; /// 让 1 的概率更大
                        }
                        if(cnt == 16) { /// 全空棋盘
                            rand_make(); /// 放置两次
                        }
                        return true;
                    }
                }
                function tidy_left() { /// 向左整理
                    try {
                        var changed = true;
                        while(changed) {
                            changed = false;
                            for(var i = 0; i < 4; i += 1) {
                                for(var j = 0; j < 4; j += 1) {
                                    if(A[i][j] == 0) continue;
                                    for(var k = j+1; k < 4; k += 1) {
                                        if(A[i][j] == A[i][k]) {
                                            A[i][j] += 1;
                                            A[i][k] = 0; /// 合并相同元素
                                            changed = true;
                                        }else if(A[i][k] != 0) {
                                            break;
                                        }
                                    }
                                }
                            }
                            for(var i = 0; i < 4; i += 1) {
                                var Tmp = new Array(4), cnt = 0;
                                for(var j = 0; j < 4; j += 1) { /// 整理非零元素
                                    if(A[i][j] != 0) {
                                        Tmp[cnt] = A[i][j];
                                        A[i][j] = 0;
                                        cnt += 1;
                                    }
                                }
                                for(var j = 0; j < cnt; j += 1) {
                                    A[i][j] = Tmp[j]; /// 整理到左侧
                                }
                            }
                            remake(); /// 每次整理后都要重新显示
                        }
                    }catch(err) {
                        alert(err);
                    }
                }
                function tidy_right() { /// 向右整理
                    try {
                        var changed = true;
                        while(changed) {
                            changed = false;
                            for(var i = 0; i < 4; i += 1) {
                                for(var j = 3; j >= 0; j -= 1) {
                                    if(A[i][j] == 0) continue;
                                    for(var k = j-1; k >= 0; k -= 1) {
                                        if(A[i][j] == A[i][k]) {
                                            A[i][j] += 1;
                                            A[i][k] = 0; /// 合并相同元素
                                            changed = true;
                                        }else if(A[i][k] != 0) {
                                            break;
                                        }
                                    }
                                }
                            }
                            for(var i = 0; i < 4; i += 1) {
                                var Tmp = new Array(4), cnt = 0;
                                for(var j = 3; j >= 0; j -= 1) { /// 整理非零元素
                                    if(A[i][j] != 0) {
                                        Tmp[cnt] = A[i][j];
                                        A[i][j] = 0;
                                        cnt += 1;
                                    }
                                }
                                for(var j = 0; j < cnt; j += 1) {
                                    if(cnt == 0) break;
                                    A[i][3-j] = Tmp[j]; /// 整理到右侧
                                }
                            }
                            remake(); /// 每次整理后都要重新显示
                        }
                    }catch(err) {
                        alert(err);
                    }
                }
                function tidy_up() { /// 向上整理
                    try {
                        var changed = true;
                        while(changed) {
                            changed = false;
                            for(var i = 0; i < 4; i += 1) {
                                for(var j = 0; j < 4; j += 1) {
                                    if(A[j][i] == 0) continue;
                                    for(var k = j+1; k < 4; k += 1) {
                                        if(A[j][i] == A[k][i]) {
                                            A[j][i] += 1;
                                            A[k][i] = 0; /// 合并相同元素
                                            changed = true;
                                        }else if(A[k][i] != 0) {
                                            break;
                                        }
                                    }
                                }
                            }
                            for(var i = 0; i < 4; i += 1) {
                                var Tmp = new Array(4), cnt = 0;
                                for(var j = 0; j < 4; j += 1) { /// 整理非零元素
                                    if(A[j][i] != 0) {
                                        Tmp[cnt] = A[j][i];
                                        A[j][i] = 0;
                                        cnt += 1;
                                    }
                                }
                                for(var j = 0; j < cnt; j += 1) {
                                    A[j][i] = Tmp[j]; /// 整理到左侧
                                }
                            }
                            remake(true); /// 每次整理后都要重新显示
                        }
                    }catch(err) {
                        alert(err);
                    }
                }
                function tidy_down() { /// 向下整理
                    try {
                        var changed = true;
                        while(changed) {
                            changed = false;
                            for(var i = 0; i < 4; i += 1) {
                                for(var j = 3; j >= 0; j -= 1) {
                                    if(A[j][i] == 0) continue;
                                    for(var k = j-1; k >= 0; k -= 1) {
                                        if(A[j][i] == A[k][i]) {
                                            A[j][i] += 1;
                                            A[k][i] = 0; /// 合并相同元素
                                            changed = true;
                                        }else {
                                            if(A[k][i] != 0) break;
                                        }
                                    }
                                }
                            }
                            for(var i = 0; i < 4; i += 1) {
                                var Tmp = new Array(4), cnt = 0;
                                for(var j = 3; j >= 0; j -= 1) { /// 整理非零元素
                                    if(A[j][i] != 0) {
                                        Tmp[cnt] = A[j][i];
                                        A[j][i] = 0;
                                        cnt += 1;
                                    }
                                }
                                for(var j = 0; j < cnt; j += 1) {
                                    if(cnt == 0) break;
                                    A[3-j][i] = Tmp[j]; /// 整理到下侧
                                }
                            }
                            remake(true); /// 每次整理后都要重新显示
                        }
                    }catch(err) {
                        alert(err);
                    }
                }
                function check_win() { /// 检测游戏是否胜利
                    var win = false;
                    for(var i = 0; i < 4; i += 1) {
                        for(var j = 0; j < 4; j += 1) {
                            if(A[i][j] >= 11) {
                                win = true;
                                break;
                            }
                        }
                    }
                    return win;
                }
                $(document).ready( function() { /// 文件就绪的出发事件
                    var _x, _y;
                    $(document).on('touchstart',function(e) {
                        var _touch = e.originalEvent.targetTouches[0];
                        _x = _touch.pageX;
                        _y = _touch.pageY;
                    });
                    $(document).on('touchend',function(e) {
                        var _touch = e.originalEvent.changedTouches[0];
                        _x2 = _touch.pageX;
                        _y2 = _touch.pageY;
                        var suc_flag = true;
                        if(Math.abs(_x-_x2) > Math.abs(_y-_y2)) {
                            /// 水平移动
                            if(_x2 > _x) { /// 向右移动
                                tidy_right();
                                suc_flag = rand_make();
                            }else { /// 向左移动
                                tidy_left();
                                suc_flag = rand_make();
                            }
                        }else { /// 竖直移动
                            if(_y2 > _y) { /// 向下移动
                                tidy_down();
                                suc_flag = rand_make();
                            }else { /// 向上移动
                                tidy_up();
                                suc_flag = rand_make();
                            }
                        }
                    });
                    var suc_flag = true;
                    $("#UP").click( function() { /// 单机上按钮
                        tidy_up();
                        suc_flag = rand_make();
                    });
                    $("#DOWN").click( function() { /// 单机下按钮
                        tidy_down();
                        suc_flag = rand_make();
                    });
                    $("#LEFT").click( function() { /// 单机左按钮
                        tidy_left();
                        suc_flag = rand_make();
                    });
                    $("#RIGHT").click( function() { /// 单机右按钮
                        tidy_right();
                        suc_flag = rand_make();
                    });
                    if(!suc_flag) {
                        /// 游戏失败
                    }
                    if(check_win()) { /// 检测游戏胜利
                        alert('你赢了，你成为了人生赢家！');
                        alert('别玩了，再玩玩坏了！');
                    }
                });
                $(document).keydown(
                    function(event) { /// 键盘按下触发事件
                        var suc_flag = true; /// 检测是否放置成功
                        if(event.keyCode == 37) { /// 左方向键
                            tidy_left();
                            suc_flag = rand_make();
                            //remake();
                        }else
                        if(event.keyCode == 39) { /// 右方向键
                            tidy_right();
                            suc_flag = rand_make();
                            //remake();
                        }else 
                        if(event.keyCode == 38) { /// 上方向键
                            tidy_up();
                            suc_flag = rand_make();
                            //remake();
                        }else 
                        if(event.keyCode == 40) { /// 下方向键
                            tidy_down();
                            suc_flag = rand_make();
                            //remake();
                        }
                        if(!suc_flag) { /// 游戏失败

                        }
                        if(check_win()) { /// 检测游戏胜利
                            alert('你赢了，你成为了人生赢家！');
                            alert('别玩了，再玩玩坏了！');
                        }
                    }
                );
            }catch(err) {
                alert("Err:" + err); /// 输出错误信息
            }
        </script>
    </head>
    <body>
        <p id="qwq">程序员之路 2048, MadeBy GGN_2015</p>
        <div class="line" style="top: 40px">
            <div class="block" id="0">
                <p></p>
            </div>
            
            <div class="block" id="1">
                <p></p>
            </div>

            <div class="block" id="2">
                <p></p>
            </div>

            <div class="block" id="3">
                <p></p>
            </div>
        </div>

        <div class="line" style="top: 115px;">
            <div class="block" id="4">
                <p></p>
            </div>
            
            <div class="block" id="5">
                <p></p>
            </div>

            <div class="block" id="6">
                <p></p>
            </div>

            <div class="block" id="7">
                <p></p>
            </div>
            <!--<button>
                Tests Button
            </button>-->
        </div>

        <div class="line" style="top: 190px;">
            <div class="block" id="8">
                <p></p>
            </div>
            
            <div class="block" id="9">
                <p></p>
            </div>

            <div class="block" id="10">
                <p></p>
            </div>

            <div class="block" id="11">
                <p></p>
            </div>
        </div>

        <div class="line" style="top: 265px;">
            <div class="block" id="12">
                <p></p>
            </div>
            
            <div class="block" id="13">
                <p></p>
            </div>

            <div class="block" id="14">
                <p></p>
            </div>

            <div class="block" id="15">
                <p></p>
            </div>
        </div>
    </body>
</html>
